<template>
  <div class="container">
    <h1>属性绑定指令</h1><hr>
    <!-- v-bind -->
    <img v-bind:src="url" alt="">
    <!-- 简写 ： -->
    <img :src="url" alt=""> 
    <!-- 原来写法 -->
    <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202107%2F19%2F20210719011558_492d2.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672108075&t=6d70a7324688e207cb4535c63da58cb2" alt=""><br><hr>
    <!-- 属性值表达式 -->
    <input type="text" :value="y"><br>
    <input type="text" :value="'Hello' + y"><br>
    <input type="text" :value="y + '～～' "><br>
    <input type="text" :value="9 + 9"><br>
  </div>
</template>

<script>
export default {
  data () {
    return {
      url:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202107%2F19%2F20210719011558_492d2.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672108075&t=6d70a7324688e207cb4535c63da58cb2',
      y: 'I am so pretty'
    }
  }
}
</script>

<style>
  h1 {
    color: #fe7299;
  }
  img{
    width: 150px;
    height: 150px;
  }
  input{
    color: #A6A1D9;
  }
</style>

